<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-home</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
        <img src="img/brand-white.png" alt="" class="p">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li>
                    <a class="nav-link text-white" href="#" style="padding-left: 20px">Home</a>
                </li>
                <li>
                    <a class="nav-link" href="#" style=" padding-left: 20px">Profile</a>
                </li>
                <li>
                    <a class="nav-link" href="#" style=" padding-left: 20px">Messages</a>
                </li>
                <li>
                    <a class="nav-link" href="#" style=" padding-left: 20px">Docs</a>
                </li>
            </ul>
        </div>
    </div>
</nav>



<main>
    <div class="container">
        <div class="item-1">
            <div class="left-top">
                <img src="img/iceland.jpg" alt="" class="tu-1">
                <div class="tu-2">
                    <img src="img/img-1.png" alt="">
                </div>
                <div class="left-1">
                    <h3>Dave Gamache</h3>
                    <p>I wish i was a little bit taller, wish i</p>
                    <p>was a baller.</p>
                </div>
            </div>
            <div class="left-zhong">
                <div class="left-2">
                    <h3>About</h3>
                    <p>Went to <a href="">Oh,Canada</a></p>
                    <p>Became friends with <a href="">Obama</a></p>
                    <p>Worked at <a href="">Github</a></p>
                    <p>Lives in <a href="">San Francisco,CA</a></p>
                    <p>From <a href="">Seattle,WA</a></p>
                </div>
            </div>
            <div class="left-right">
                <h3>Photos</h3>
                <div class="left-3">
                    <img src="img/instagram_5.jpg" alt="">
                    <img src="img/instagram_6.jpg" alt="">
                    <img src="img/instagram_7.jpg" alt="">
                    <img src="img/instagram_8.jpg" alt="">
                    <img src="img/instagram_9.jpg" alt="">
                    <img src="img/instagram_10.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="item-2">
            <div class="zhong">
                <div class="zhong-1">
                    <div class="container">
                        <h6>Dave Gamache</h6>
                        <span>4min</span>
                        <p>Aenean lacinia bibendum nulla sed consectetur.Vestibulum id ligula porta felis</p>
                        <p>euismod semper.Morbi leo risus,porta ac consectetur ac,vestibulum at eros.Cras</p>
                        <p>justo odio,dapibus ac facilisis in,egestas eget quam.Vestibulum id ligula porta felis</p>
                        <p>euismod semper.Cum sociis natoque penatibus et magnis dis parturient montes,</p>
                        <p>nascetur ridiculus mus.</p>
                    </div>
                </div>
                <div class="zhong-2">
                    <img src="img/unsplash_1.jpg" alt="">
                    <img src="img/instagram_1.jpg" alt="">
                    <img src="img/instagram_13.jpg" alt="">
                    <img src="img/unsplash_2.jpg" alt="">
                </div>
                <div class="zhong-3">
                    <ul>
                        <li>
                            <span class="zi-3">Jacon Thornton:</span><span class="zi-4">Donec id elit non
                            mi porta gavida at eget metus.Vivamus sagittislacus vel augue laoreet ruturum
                            faucibus dolor auctor.Donec ullamcorper nulla nonmetus auctor fringilla.Praesent
                            commodo cursus magna,vel scelerisque nislconsectstur et.Sed posuere consectetur
                            est at lobortis.</span>
                        </li>
                    </ul>
                </div>
                <div class="zhong-4">
                    <ul>
                        <li>
                            <span class="zi-3">Mark Otto:</span><span class="zi-4">Lprem ipsum dolir sit amet,
                            consectetur adipiscing elit.Fusce dapibus,tellus ac cursus commodo,tortor mauris
                            condimentum nibh,ut fermentum massa justo sit amet risus.</span>
                        </li>
                    </ul>
                </div>
                <div class="zhong-5"></div>
                <div class="zhong-6">
                    <div class="container">
                        <h6>Jacob Thornton</h6>
                        <span>12min</span>
                        <p>Donec id elit non mi porta gravida at eget metus.lnteger posuere erat a ante</p>
                        <p>venenatis dapibus posuere velit aliquet.Cum sociis natoque penatibus et magnis</p>
                        <p>dis parturient montes,nascetur ridiculus mus.Morbi leo risus,porta ac consectetur</p>
                        <p>ac,vestibulum at eros.Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
                    </div>
                </div>
                <div class="zhong-7"></div>
                <div class="zhong-8">
                    <div class="container">
                        <h6>Mark Otto</h6>
                        <span>34min</span>
                        <p>Donec ullamcorper nulla non metus auctor fringilla.Vestibulum id ligula porta felis</p>
                        <p>euismod semper.Aenean eu leo quam.Pellentesque ornare sem lacinia quam</p>
                        <p>venenatis vestibulum.Etiam porta sem malesuada magna mollis euismod.Donec</p>
                        <p>sed odio dui.</p>
                    </div>
                </div>
                <div class="zhong-9">
                    <img src="img/instagram_3.jpg" alt="">
                </div>
                <div class="zhong-10">
                    <ul>
                        <li>
                            <span class="zi-3">Dave Gamache:</span><span class="zi-4">Donec idelit non mi
                            porta gravida at eget metus.Vivamus sagittis lacus vel augue laoreet rutrum faucibus
                            dolor auctor.Donec ullamcorper nulla non metus auctor fringilla.Praesent commodo cursus
                            magna, vel scelerisque nisl consectetur et.Sed posuere consecteur est at lobortis.</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="item-3">
            <div class="right-top">
                <h6>Sponsored</h6>
                <img src="img/instagram_2.jpg" alt="">
                <p class="zi-5">It might be time to visit lceland.</p>
                <p>Iceland is so chill,and everything</p>
                <p>look cool here.Also we heard the</p>
                <p>people are pretty nice.what are you</p>
                <p>waiting for?</p>
                <button>Buy a ticket</button>
            </div>
            <div class="right-bottom">
                <h6>Likes</h6>
                <div class="container">
                    <div class="item-4">
                        <img src="img/img-2.png" alt="">
                    </div>
                    <div class="item-5">
                        <h6>Jacob Thornton @fat</h6>
                        <div class="item-5-1">
                            <img src="img/anniu.png" alt="">
                            <a href="" class="an-1">Follow</a>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="item-4">
                        <img src="img/img-3.png" alt="">
                    </div>
                    <div class="item-5">
                        <h6>Mark Otto @mdo</h6>
                        <div class="item-5-1">
                            <img src="img/anniu.png" alt="">
                            <a href="" class="an-1">Follow</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-bottom-1">
                <div class="zi-6">
                    <p>Dave really likes these nerds,no one</p>
                    <p>knows why though.</p>
                </div>
            </div>
        </div>
    </div>
</main>
<div class="xian"></div>
<footer>
    <div class="footer-top">
        <span>Designed and built with all the love in the world by <a href="">@mdo,@fat</a>,and <a href="">@dhg</a>.</span>
    </div>
    <div class="footer-bottom">
        <a href="">About</a>
        <a href="">Terms</a>
        <a href="">Privacy</a>
        <a href="">Licenses</a>
        <a href="">FAQ</a>
    </div>
</footer>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</html>